<template>
  <el-dropdown v-if="projects.length > 1" @command="switchProject">
    <span class="el-dropdown-link">
      {{ project.name }}<i class="el-icon-arrow-down el-icon--right" />
    </span>
    <el-dropdown-menu slot="dropdown" style="max-height:480px;overflow-y:scroll;">
      <el-input v-model="project_name" placeholder="项目名称" style="width:94%;margin:3%;" clearable />
      <el-dropdown-item
        v-for="(item,index) in projectsMergePinyin.filter((val) => {
          return val.name.indexOf(project_name) > -1 || val.pinyin.indexOf(project_name) > -1 || val.pinyinLower.indexOf(project_name) > -1 || val.pinyinUpper.indexOf(project_name) > -1 || val.pinyinFull.indexOf(project_name) > -1
        })"
        :key="index"
        :command="item.id"
      >
        <span>{{ item.name }}</span>
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import { mapGetters } from 'vuex'
import { clearCache } from '@/utils'
const pinyin = require('js-pinyin')
export default {
  name: 'MapTools',
  data() {
    return {
      project_name: ''
    }
  },
  computed: {
    ...mapGetters(['projects', 'project']),
    projectsMergePinyin() {
      const res = this.projects.map((val) => {
        return {
          name: val.name,
          id: val.id,
          pinyin: pinyin.getCamelChars(val.name),
          pinyinUpper: pinyin.getCamelChars(val.name).toUpperCase(),
          pinyinLower: pinyin.getCamelChars(val.name).toLowerCase(),
          pinyinFull: pinyin.getFullChars(val.name)
        }
      })
      return res
    }
  },
  methods: {
    switchProject(val) {
      clearCache()
      console.log(val,1111111)
      this.$store.dispatch('device/getAll', { project_id: val }).then(res => {
        this.$message.success({ message: '项目切换成功', type: 'success', showClose: true })
        window.location.reload()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dropdown-link{
  display:inline-block;
  margin:10px 24px;
  cursor:pointer;
}
</style>
